<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" class="xm">
<input type="text" placeholder="请输入员工工资" class="gz">
<input type="text" placeholder="请输入员工岗位" class="gw">
<button onclick="f1()">添加员工</button>
<table border="1px">
    <caption style="font-weight: bold">员工表</caption>
    <tr>
        <td style="font-weight: bold">姓名</td>
        <td style="font-weight: bold">工资</td>
        <td style="font-weight: bold">岗位</td>
    </tr>
</table>
<script>
    let arr = [];
    function f1(){
        var uName = document.querySelector(".xm").value;
        let uSalary = document.querySelector(".gz").value;
        let uJob = document.querySelector(".gw").value;

        let tr = document.createElement('tr');
        let nameTd = document.createElement("td");
        let salaryTd = document.createElement("td");
        let jobTd = document.createElement("td");
        nameTd.innerHTML = uName;
        salaryTd.innerHTML = uSalary;
        jobTd.innerHTML = uJob;
        tr.append(nameTd,salaryTd,jobTd);
        let table = document.querySelector("table");
        table.append(tr);
        document.querySelector(".xm").value = '';
        document.querySelector(".gz").value = '';
        document.querySelector(".gw").value = '';
        arr.push({
            name:uName,
            salary:uSalary,
            job:uJob
        })
        console.log(arr)
    }
</script>
</body>
</html>